<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--line-height方式-->
<style>
    .d1{
        line-height: 100px;
        border: 1px lightskyblue solid;
    }
</style>

<div class="d1">line-height 适合单独一行垂直居中</div>

<!--内边距方式-->
<style>
    .d2{
        padding: 30px 0;
        border: 1px lightskyblue solid;
    }
</style>

<div class="d2">多行内容 多行内容 多行内容 多行内容 多行内容
    多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容
    多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容
    多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容
    多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容
    多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容  </div>

<!--table方式-->
<!--首先通过display: table-cell;把div用单元格的形式显示，然
后借用单元格的垂直居中vertical-align: middle; 来达到效果。
这样对图片也可以居中，上一步 line-height就不能对图片居中。-->
<style>
    .d3{
        display: table-cell;
        border: 1px lightskyblue solid;
        vertical-align: middle;
        height: 200px;
    }
</style>

<div class="d3"><img src="https://how2j.cn/example.gif"></div>
</body>
</html>